<template>
	<div v-show="sshow" class="wrapper">
		<div v-show="sshow" @click='cancel' class="shade" style="height: 10rem;"></div>
		<!-- 黑名单提示组件 -->
		<ul v-if="judge == 1" class="hint" >
			<li><span>确认移除黑名单?</span></li>
			<li class="true"><span @click="cancel">取消</span><span @click="ensure">确定</span></li>
		</ul>
		<!-- 邀请与删除成员提示组件 -->
		<ul v-if="judge == 2" class="member">
			<router-link :to="{path:'uigetdir',query: {id:1}}" tag='li'>
				<i></i>
				<span>邀请新成员</span>
			</router-link>
			<router-link :to="{path:'uigetdir',query: {id:2}}" tag='li'>
				<span>删除成员</span>
			</router-link>
		</ul>
		<!-- 移除管理员提示组件 -->
		<ul v-if="judge == 3" class="hint three">
			<li><span>移除管理员</span></li>
			<li class="true"><span @click="cancel">取消</span><span @click="ensure">确定</span></li>
		</ul>
		<ul v-if="judge == 4" class="send">
			<li><span @click='ensure'>发送到群内</span></li>
			<li @click='cancel'><span>取消</span></li>
		</ul>
		<!-- 发送给朋友与设置公开信息提示组件 -->
		<div v-if="judge == 5" class="shade_main color5">
			<ul>
				<li @click="clickBtn(0)"><span>查看详情</span></li>
				<li @click="clickBtn(1)"><span>{{ttext}}</span></li>
				<li @click="clickBtn(2)"><span>发给朋友</span></li>
				<li @click="clickBtn(3)"><span>删除</span></li>
				<!-- <li><span>{{str2}}</span></li>
				<li><span style="color:#F24949">{{str3}}</span></li> -->
			</ul>
			<ul style="color:#157FFB">
				<li @click='cancel'><span>取消</span></li>
			</ul>
		</div>
		
		<!-- 添加展示与删除标签提示组件 -->
		<ul v-if="judge == 6" class="delete">
			<li @click="toShow">添加到展示</li>
			<li @click='delEle'>删除标签</li>
			<li @click='cancel'><span>取消</span></li>
		</ul>
		<!-- 添加标签提示组件 -->
		<ul v-if="judge == 7" class="redact">
			<li>
				<span>编辑标签</span>
				<input placeholder="添加标签（最多5字）" v-model.trim="content" maxlength="5" type="text">
			</li>
			<li>
				<span  @click='cancel'>取消</span>
				<span  @click='ensure'>确定</span>
			</li>
		</ul>
		<!-- 删除该标签提示组件 -->
		<ul v-if="judge == 8" class="crowd_delete">
			<li><span>删除该标签</span></li>
			<li><span @click='abolish'>取消</span><span @click='confirm'>确认</span></li>
		</ul>
		<!-- 取消关注提示组件 -->
		<ul v-if="judge == 9" class="delete unfollow">
			<li><span>取消关注</span></li>
			<li><span @click='cancel'>取消</span></li>
		</ul>
		<!-- 50后提示组件 -->
		<div v-if="judge == 10" class="shade_main">
			<ul>
				<li v-for='item in arrs'><span>{{item}}</span></li>
			</ul>
		</div>
		<!-- 选择性别提示组件 -->
		<div v-if="judge == 11" class="shade_main">
			<ul>
				<li v-for='item in brrs'><span>{{item}}</span></li>
			</ul>
			<ul>
				<li  class="cancel" @click='cancel'><span>取消</span></li>
			</ul>
		</div>
		<!-- 相册提示组件 -->
		<div v-if="judge == 12" class="shade_main">
			<ul>
				<li v-for='item in crrs'><span>{{item}}</span></li>
			</ul>
			<ul>
				<li  class="cancel" @click='cancel'><span>取消</span></li>
			</ul>
		</div>

		<!-- 添加标签展示 -->
		<ul v-if="judge == 13" class="addShow">
			<li @click="intoShow">添加到展示</li>
			<li @click='cancel'><span>取消</span></li>
		</ul>
	</div>
</template>
	
<script>
/*--------------
	judge:判断在哪个页面出现哪个提示框
	sshow：判断提示页面的显示跟隐藏
	type:判断样式5的内容
---------------*/
export default{
	props:['sshow','judge','type','ttext'],
	data () {
		return{
			str1:'',
			str2:'',
			str3:'',
			arrs:['50后','60后','70后'],
			brrs:['男','女','保密'],
			crrs:['相册'],
			content: '',
		}
	},
	methods:{
		cancel:function(){
			this.$emit('hide');
		},
		ensure:function(){
			this.$emit('hide', this.content);
			this.content = '';
		},
		delEle() {
			this.$emit('delEle');
		},
		toShow(){
			this.$emit('groupShow');
		},
		intoShow(){
			this.$emit('adShowEle');
		},
		abolish(){
			this.$emit("abolish");
		},
		confirm(){
			this.$emit("confirm");
		},
		clickBtn(index){
			this.$emit("clickBtn", index);
		}
	}
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
/*---------------样式1-------------------*/
	@color_1: #A6A6A6;
	@color_2: #157FFB;
	.wrapper {
		width: 10rem;
		position: absolute;
		height: 100%; 
		background: red; 
		top: 0;
		background-color: rgba(0,0,0,0.7);
	}

.hint {
	width: 3.45rem;
	height: 0.98rem;
	background: #fff;
	position: absolute;
	z-index: 1000;
	bottom: 3rem;
	left: .15rem;
	border-radius: 0.1rem;
	li {
		width: 100%;
		height: 0.4rem;
		line-height: 0.4rem;
		display: flex;
		&:nth-of-type(1) {
			height: 0.57rem;
			line-height: 0.57rem;
			span {
				border-bottom: 1px solid #ccc;
			}
		}
		span {
			flex: 1;
			text-align: center;
			font-size: 0.18rem;
		}
		&:nth-of-type(2) {
			span {
				&:nth-of-type(1) {
					border-right: 1px solid #ccc;
					color: @color_1;
				}
				&:nth-of-type(2) {
					color: @color_2;
				}
			}
		}
	}
}


/*---------------样式2-------------------*/
	@color_3: #4A4A4A;

.member {
	width: 0.86rem;
	height: 0.8rem;
	background: #fff;
	position: absolute;
	z-index: 1000;
	top: 0.75rem;
	right: 0.07rem;
	border-radius: 0.05rem;
	li {
		height: 50%;
		line-height: 0.4rem;
		text-align: center;
		font-size: 0.14rem;
		color: @color_3;
		&:nth-of-type(1) {
			border-bottom: 1px solid #E1E1E1;
			position: relative;
			>i {
				width: 0;
				height: 0;
				border-left: 0.15rem solid transparent;
				border-right: 0.15rem solid transparent;
				border-bottom: 0.1rem solid #fff;
				position: absolute;
				top: -0.06rem;
				right: 0.1rem;
			}
		}
	}
}

/*---------------样式3-------------------*/
	@color_4: #EC5656;

.three {
	width: 2.35rem;
	height: 1.28rem;
	/*margin-top: 3rem;*/
	position: absolute;
	z-index: 1000;
	bottom: 2.4rem;
	left: 0.7rem;
	li[data-v-28f045ed] {
		&:nth-of-type(1) {
			height: 0.86rem;
			line-height: 0.86rem;
		}
	}
	li {
		&:nth-of-type(2) {
			span {
				&:nth-of-type(2) {
					color: @color_4;
				}
			}
		}
	}
}

/*---------------样式4-------------------*/

	@color_5: #157FFB;
	@color_6: #4A4A4A;

.send {
	width: 2.35rem;
	height: .9rem;
	background: #fff;
	border-radius: .1rem;
	position: absolute;
	z-index: 1000;
	left: 0.7rem;
	top: 2.6rem;
	font-size: 0.16rem;
	li {
		height: 50%;
		line-height: .45rem;
		text-align: center;
		color: @color_5;
		&:last-of-type {
			color: @color_6;
			border-top: 1px solid #E1E1E1;
		}
	}
}

/*---------------样式5-------------------*/

.shade_main {
	position: absolute;
	bottom: 0rem;
	left: .18rem;
	z-index: 1000;
	ul {
		background: #fff;
		border-radius: 0.1rem;
		margin: 0 auto 0.18rem;
		width: 3.39rem;
		font-size: 0.18rem;
		li {
			text-align: center;
			border-bottom: 1px solid #eee;
			color: #4F4F4F;
			&:last-of-type {
				border: 0;
			}
			span {
				height: 0.44rem;
				line-height: 0.44rem;
				display: block;
			}
		}
	}
}
.color5{
	ul{
		li{
			&:last-of-type {
				border: 0;
				color: #F24949;
			}
			&:nth-of-type(1){
				color: #157FFB;
			}
		}
	}
}
/*---------------样式6-------------------*/
	@color_7: #157FFB;

.delete {
	background: #fff;
	width: 1.55rem;
	height: 1.28rem;
	background: #F0F0F7;
	border-radius: 0.1rem;
	/*margin-top: 2.92rem;
	margin-left: 1.1rem;*/
	position: absolute;
	z-index: 1000;
	bottom: 2.9rem;
	left: 1.1rem;
	li {
		height: 0.42rem;
		line-height: 0.42rem;
		text-align: center;
		font-size: 0.16rem;
		border-top: 1px solid #E1E1E1;
		&:nth-of-type(1) {
			color: @color_7;
			border: 0;
		}
		&:last-of-type {
			color: #9A9A9A;
			border: 0;
		}
	}
}
.addShow {
	background: #fff;
	width: 1.55rem;
	// height: 1.28rem;
	background: #F0F0F7;
	border-radius: 0.1rem;
	/*margin-top: 2.92rem;
	margin-left: 1.1rem;*/
	position: absolute;
	z-index: 1000;
	bottom: 2.9rem;
	left: 1.1rem;
	li {
		height: 0.42rem;
		line-height: 0.42rem;
		text-align: center;
		font-size: 0.16rem;
		border-top: 1px solid #E1E1E1;
		&:nth-of-type(1) {
			color: @color_7;
			border: 0;
		}
		&:last-of-type {
			color: #9A9A9A;
			border: 0;
		}
	}
}
.unfollow {
	height: 0.85rem;
}

/*---------------样式7-------------------*/
	@color_8: #A6A6A6;
	@color_9: #157FFB;

.redact {
	width: 3.45rem;
	height: 1.36rem;
	background: #F0F0F7;
	border-radius: 0.1rem;
	position: absolute;
	bottom: 2.39rem;
	left: 0.15rem;
	z-index: 1000;
	li {
		&:nth-of-type(1) {
			height: 0.96rem;
			border-bottom: 1px solid #E1E1E1;
			span {
				font-size: 0.18rem;
				display: block;
				height: 50%;
				line-height: 0.48rem;
				text-align: center;
			}
			input {
				outline: none;
				border: 0.01rem solid #D8D8D8;
				background: #F0F0F7;
				width: 3rem;
				height: 0.3rem;
				line-height: .3rem;
				margin: 0 0.15rem;
				border-radius: 0.05rem;
				padding-left: 0.15rem;
			}
		}
		&:nth-of-type(2) {
			font-size: 0.18rem;
			display: flex;
			line-height: 0.4rem;
			span {
				flex: 1;
				text-align: center;
				color: @color_8;
				&:nth-of-type(2) {
					color: @color_9;
				}
			}
		}
	}
}


/*---------------样式8-------------------*/
	@color_10: #4A4A4A;
	@color_11: #157FFB;

.crowd_delete {
	width: 2.35rem;
	height: 1.28rem;
	margin: 3rem auto 0;
	position: absolute;
	bottom:2.39rem;
	z-index: 1000;
	left: .7rem; 
	background: #F0F0F7;
	border-radius: 0.08rem;
	li {
		&:nth-of-type(1) {
			height: 0.86rem;
			line-height: 0.86rem;
			font-size: 0.16rem;
			color: @color_10;
			font-weight: bold;
			text-align: center;
			border-bottom: 1px solid #E1E1E1;
		}
		&:last-of-type {
			display: flex;
			span {
				flex: 1;
				line-height: 0.4rem;
				text-align: center;
				color: @color_11;
				font-size: 0.16rem;
			}
		}
	}
}
.shade_main ul .cancel{
	color: #157FFB;
}

</style>